/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
const creator = '播崽'
axios({
    url: 'http://hmajax.itheima.net/api/settings',
    params: {
        creator
    }
}).then(res => {
    console.log(res, 'res')
    // const {email,nickname,gender,desc} = res.data.data
    // // 给表单赋值
    // document.querySelector('.email').value = email
    // document.querySelector('.nickname').value = nickname
    // document.querySelector('.desc').value = desc

    // // 性别
    // document.querySelector(`[name=gender][value="${gender}"]`).checked = true
    // 渲染数据  

    const obj = res.data.data
    Object.keys(obj).forEach(function (key) {
        // 处理性别
        if (key === 'gender') {
            document.querySelector(`[name=gender][value="${obj[key]}"]`).checked = true
            // 处理头像  
        } else if (key === 'avatar') {
            document.querySelector('.prew').src = obj[key]
        } else {
            // 处理邮箱 昵称 个人简介
            document.querySelector(`.${key}`).value = obj[key]
        }
    })
}).catch(error => {
    console.log(error, 'error')
})
/**
 * 目标2：修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 * */
document.querySelector('.upload').addEventListener('change', function (e) {
    const file = e.target.files[0]
    const fd = new FormData()
    fd.append('avatar', file)
    fd.append('creator', '老卢')

    axios({
        url: 'http://hmajax.itheima.net/api/avatar',
        method: 'put',
        data: fd
    }).then(res => {
        document.querySelector('.prew').src = res.data.data.avatar
    })
})

/**
 * 目标3：提交表单
 *  3.1 收集表单信息
 *  3.2 提交到服务器保存
 */

// 1.给提交按钮绑定点击事件
document.querySelector('.submit').addEventListener('click', function () {
    // 2.收集表单数据 serialize
    const userForm = document.querySelector('.user-form')
    const form = serialize(userForm, { hash: true, empty: true })
    form.gender = +form.gender
    // 3.把数据提交给服务器
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        method: 'put',
        data: { ...form, creator }
    }).then(res => {
        // 显示提示 操作成功
        const toastDom = document.querySelector('.toast')
        const toast = new bootstrap.Toast(toastDom)
        toast.show()
    }).catch(err => {
        console.log(err)
    })
})


/**
 * 目标4：结果提示
 *  4.1 创建toast对象
 *  4.2 调用show方法->显示提示框
 */
